<template>
    <div class="email">
        <headIndex :hindex="num" @getCat="valueChange"/>

        <div class="main clearfix mt35">
            <div class="fl email-list">
                <el-form :inline="true" :model="formInline" class="demo-form-inline">
                    <el-form-item label="查询内容：">
                        <el-input v-model="formInline.value" placeholder="请输入查询内容"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="getList">查询</el-button>
                    </el-form-item>
                    <!-- <el-form-item>
                        <el-button @click="formInline.isReview=1">查询已回复</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button @click="formInline.isReview=0">查询未回复</el-button>
                    </el-form-item> -->
                </el-form>
                <ul v-if="retotal > 0">
                    <li v-for="(item,index) in gustbookList">
                        <div class="flex flex-align-center">
                            <div>
                                <div class="time">
                                    <span style="padding-right:10px;">{{index + 1}}.</span>
                                    留言时间：{{ item.createTime }}
                                </div>
                                <div>
                                    <span class="title">标题：</span>
                                    <span class="wd_colof">{{ item.title }}</span>
                                </div>
                                <div>
                                    <span class="title">内容：</span>
                                    <span class="nr_color">{{ item.content }}</span>
                                </div>
                            </div>
                        </div>
                        <div v-for="(item2,index) in item.newguestbookRespList">
                            <div class="time">回复时间：{{item2.huifushijian}}</div>
                            <div>
                                <span class="title">回复人：</span>
                                <span class="nr_color">{{item2.huifuren}}</span>
                            </div>
                            <div>
                                <span class="title">回复：</span>
                                <span class="nr_color">{{item2.huifucontent}}</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <el-empty v-if="retotal <= 0" description="暂无数据"></el-empty>
                <div v-if="retotal > 0" class="page">
                    <div style="display: flex">
                        <el-pagination
                        :small="true"
                        :background="true"
                        @current-change="handleSizeChange"
                        :current-page="pageindex"
                        :page-size="pagesize"
                        layout="slot, prev, pager, next"
                        :total="retotal"
                        prev-text="上一页"
                        next-text="下一页"
                        >
                        <button
                            :disabled="pageindex == 1"
                            @click="handleSizeChange(1)"
                            class="btn-prev"
                        >
                            首页
                        </button>
                        </el-pagination>
                        <el-pagination
                        style="float: right"
                        :small="true"
                        :background="true"
                        layout="slot"
                        :total="retotal"
                        :current-page="pageindex"
                        :page-size="pagesize"
                        prev-text="上一页"
                        next-text="下一页"
                        @current-change="handleSizeChange"
                        >
                        <button
                            :disabled="pageindex == reCount"
                            @click="handleSizeChange(reCount)"
                            class="btn-prev"
                        >
                            尾页
                        </button>
                        </el-pagination>
                        <el-pagination
                        :small="true"
                        :background="true"
                        @current-change="handleSizeChange"
                        :current-page="pageindex"
                        :page-size="pagesize"
                        layout="slot"
                        :total="retotal"
                        prev-text="上一页"
                        next-text="下一页"
                        >
                        <span class="el-pagination__total" style="padding-right: 20px"
                            >当前页 <span style="color: red">{{ pageindex }}</span> /
                            {{ reCount }}
                        </span>
                        </el-pagination>
                        <el-pagination
                        :small="true"
                        :background="true"
                        @current-change="handleSizeChange"
                        :current-page="pageindex"
                        :page-size="pagesize"
                        layout="total"
                        :total="retotal"
                        prev-text="上一页"
                        next-text="下一页"
                        >
                        </el-pagination>
                    </div>
                </div>
            </div>
            <!----留言须知---->
            <div class="fr email-form">
              <div>
                <p style="font-weight: bold">留言须知：</p>
                <p>1.信箱留言应严格遵守法律法规及社会公德，不得捏造、歪曲事实；不得诋毁、辱骂他人；不得煽动民族、宗教、种族、地域等敏感问题；不得散步淫秽、色情、暴力等不良信息。对于违反法律法规的留言行为，留言者自行承担相应的法律责任。</p>
                <p>2.信箱留言人应当自觉遵守互联网礼仪，进行理性、真诚、友善的互动交流，不得发表人身攻击等激化矛盾的言论；不得进行恶意刷屏等破坏秩序的行为，同时，应当尊重他人的合法权益，不得侵犯他人的隐私、名誉等。</p>
                <p>3.领导信息是部队官兵向领导提出意见和建议的渠道之一。对于所反映问题，建议首先与部队相关部门联系沟通，了解实际情况，并寻求解决措施。</p>
                <p>4.为便于及时准确的了解留言诉求，建议准确详细的描述所反映的问题，并根据各职能部门职责范围，@相应部门进行留言，以便有针对性地解决您反映的问题，留言成功后，所有部门会及时接收，按规定报送、处理并原则上于三日内反馈处理情况。在此期间，请不要重复提交。</p>
              </div>
              <div class="addEmail">
                <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                    <el-form-item label="昵称：">
                        <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="联系方式：">
                        <el-input v-model="form.tel"></el-input>
                    </el-form-item>
                    <el-form-item label="留言标题：" prop="title">
                        <el-input v-model="form.title"></el-input>
                    </el-form-item>
                    <el-form-item label="留言内容：">
                        <el-input type="textarea" rows="8" v-model="form.content"></el-input>
                    </el-form-item>
                    <el-form-item label="接收人：" prop="region">
                        <el-select v-model="form.region" value-key="userId" placeholder="请选择接收人" @change="changeUser($event)">
                            <el-option
                                v-for="dict in sendUser"
                                :key="dict.userId"
                                :label="dict.userName"
                                :value="dict"
                            />
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit('form')">添加留言</el-button>
                        <el-button>取消</el-button>
                    </el-form-item>
                </el-form>    

              </div>
            </div>
            
        </div>

        <footIndex />
    </div>   
</template>   

<script setup name="email">
import headIndex from "./components/headIndex/index.vue";
import footIndex from "./components/footIndex/index.vue";
import {
    getPeople,
    addGustbook,
    getGustbook,
    getGustbooklist
} from "@/api/yxzx/info";
export default {
    components: {
        headIndex,
        footIndex,
    },
    data() {
        return {
            loading: true,
            num: 6,
            formInline: {
                value: '',
                isReview: 1
            },
            gustbookList: [],
            form: {
                name: '',
                tel: '',
                title: '',
                content: '',
                region: '',
            },
            rules: {
                title: [
                    { required: true, message: '请输入标题', trigger: 'blur' }
                ],
                region: [
                    { required: true, message: '请选择接收人', trigger: 'change' }
                ],
            },
            retotal: 0,
            pageindex: 1,
            pagesize: 10,
            reCount: 0,
            sendUser: [],
            queryPrams:{},
            receiverId: '',

        }
    },
    watch: {},
    created() {
        this.getList()
        this.getUser()
    },
    methods: {
        valueChange(val){},
        // 表单重置
        reset() {
            this.form = {
                name: "",
                tel: "",
                title: "",
                content: "",
                region: "",
            };
            this.resetForm("form");
        },
        /*查询留言列表 */
        getList(){
            getGustbooklist(this.pageindex,
                        this.pagesize,
                        this.receiverId,
                        this.formInline.value,
                        this.formInline.isReview
            ).then((response) => {
                this.retotal = response.total
                this.gustbookList = response.rows
            });
        },
        /*查询接收人 */
        getUser(){
            getPeople().then((response) => {
                this.sendUser = response.rows
            });
        },
        /*选择接收人事件 */
        changeUser(val){
            this.queryPrams.receiverName = val.userName     
            this.queryPrams.receiverId = val.userId
        },
        /*添加留言按钮 */
        onSubmit(formName){
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    this.queryPrams.nickname = this.form.name
                    this.queryPrams.phone = this.form.tel
                    this.queryPrams.title = this.form.title
                    this.queryPrams.content = this.form.content
                    console.log(this.queryPrams)
                    addGustbook(this.queryPrams).then((response) => {
                        this.$modal.msgSuccess("留言添加成功！");
                        this.reset();
                        this.getList();
                    });
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
        /*分页事件 */
        handleSizeChange(val) {
            this.pageindex = val;
            this.getList()
        },
    }

}
</script>